Skip to main content

yLinkButton

Description​

The yLinkButton is a clickable element with different optical styles, used to indicate its different states. The yLinkButton can be used to trigger a user action and to redirect to other pages. For example:

Basic Structure​

The basic structure of the yLinkButton shall be explained in the following. For the general structure of a yComponent please visit the YBase-components basic-structure.

Button Structure

The yLinkButton as seen above contains a label and a icon.

Label​

The label contains the text inside the button. It is normally in the center of the component, but can also be displayed on the right or left side. By changing the inner padding of the button, the label gets moved too.

Icon​

Icon Structure

The icon can be used to show an icon inside the yLinkButton - you can have a maximum of two icons. The icon can be before or after the text and if you want to have a yLinkButton with just an icon and no text, you have to delete the text inside the Label.

Properties​

METAread more
Name: componentId
Not Editable
Number Property
--y-link-button__component-id

The identifier of the component that is unique within a page.

Name: componentType
Not Editable
String Property
--y-link-button__component-type

The type of the component. For this component it is -link-button.

Name: name
String Property
--y-link-button__name

The custom name of the component. It serves for better identification of the component.

Name: version
String Property
--y-link-button__version

The custom version of the LinkButton-component. This can be used to ensure that all components work well together.

Name: coreTheme
String Property
--y-link-button__core-theme

The CoreTheme, which will be apllied to the LinkButton. For further information on themes visit the themes page.

Name: subTheme
String Property
--y-link-button__sub-theme

The subtheme subordinated to the previously specified CoreTheme, which will be apllied to the LinkButton. For further information on themes visit the themes page.

Name: groupTheme
String Property
--y-link-button__group-theme

The group theme is a further variation of the subtheme which is specified especially for variations of a component inside the subtheme. For further information on themes visit the Theme-Manager page.

DISPLAYread more
Name: display
String Property
--y-link-button__display

This property specifies the display behavior of the component. This can be be set to:

  • none
  • block
  • flex
  • inline
Name: position
Not Editable
String Property
--y-link-button__position

This property specifies the type of positioning method used for the component. This can be be set to:

  • static
  • relative
  • absolute
  • sticky
  • fixed
Name: visible
String Property
--y-link-button__visible

This property can toggle the visibility of the component. The two modes are completely hidden and fully shown.

SIZEread more
Name: minWidth
Injectable
UnitNumber Property
--y-link-button__min-width

The minimum value for the width of the component. This can be set in:

  • px
  • pt
  • em
  • vw
  • vh
  • %
Name: minHeight
Injectable
UnitNumber Property
--y-link-button__min-height

The minimum value for the height of the component. This can be set in:

  • px
  • pt
  • em
  • vw
  • vh
  • %
Name: width
Injectable
UnitNumber Property
--y-link-button__width

The value for the width of the component. This can be set in:

  • px
  • pt
  • em
  • vw
  • vh
  • %
  • auto
Name: height
Injectable
UnitNumber Property
--y-link-button__height

The value for the height of the component. This can be set in:

  • px
  • pt
  • em
  • vw
  • vh
  • %
  • auto
Name: maxWidth
Injectable
UnitNumber Property
--y-link-button__max-width

The maximum value for the width of the component. This can be set in:

  • px
  • pt
  • em
  • vw
  • vh
  • %
  • none
Name: maxHeight
Injectable
UnitNumber Property
--y-link-button__max-height

The maximum value for the height of the component. This can be set in:

  • px
  • pt
  • em
  • vw
  • vh
  • %
  • none
Name: flex
String Property
--y-link-button__flex

The flex property sets the length on flexible items. This sets the value in n-fold shares extrapolated to all other components with the flex display within the same container.

PLACEMENTread more
Name: marginTop
Injectable
UnitNumber Property
--y-link-button__margin-top

This property creates a space around the component, outside of the top border. This can be set in percent or pixels.

Name: marginRight
Injectable
UnitNumber Property
--y-link-button__margin-right

This property creates a space around the component, outside of the right border. This can be set in percent or pixels.

Name: marginBottom
Injectable
UnitNumber Property
--y-link-button__margin-bottom

This property creates a space around the component, outside of the bottom border. This can be set in percent or pixels.

Name: marginLeft
Injectable
UnitNumber Property
--y-link-button__margin-left

This property creates a space around the component, outside of the left border. This can be set in percent or pixels.

Name: paddingTop
Injectable
UnitNumber Property
--y-link-button__padding-top

This property creates a space within the component, inside of the top border. This can be set in percent or pixels.

Name: paddingRight
Injectable
UnitNumber Property
--y-link-button__padding-right

This property creates a space within the component, inside of the right border. This can be set in percent or pixels.

Name: paddingBottom
Injectable
UnitNumber Property
--y-link-button__padding-bottom

This property creates a space within the component, inside of the bottom border. This can be set in percent or pixels.

Name: paddingLeft
Injectable
UnitNumber Property
--y-link-button__padding-left

This property creates a space within the component, inside of the top border. This can be set in percent or pixels.

Usage​

In this section you will find a collection of application scenarios and examples that illustrate how to leverage the yLinkButton in ways that deviate from its standard behavior, as defined by yBase. This section aims to inspire and guide you through various possibilities, helping you to implement more complex or unique functionalities tailored to your specific needs. General properties that are universally applicable can be found in the yBase usage section.

Variations​

Button Elevated
Elevated
Button Flat
Flat
Button Outlined
Outlined
Button Rounded
Rounded
Button Plain
Plain
genericsizeminWidth120px
stylebackgroundbgColor__normal#44ddbb
styleshadowboxShadow__normal0 3px 6px 0 rgba(16, 18, 24, 0.2)
styleborderborderRadius8px
stylelabellabel__fontColor__normal#FFFFFF

Label​

LinkButton Label
Uppercase Label
genericsizeminWidth150px
stylelabellabel__fontColor#FFFFFF
stylelabellabel__fontFamily'Roboto'
stylelabellabel__fontStyle'italic'
stylelabellabel__fontSize20px
stylelabellabel__fontWeight'bold'
stylelabellabel__textTransform'uppercase'
stylelabellabel'Proceed'

Icon​

LinkButton Icon Right
iconRight
LinkButton Icon Both
iconBoth
LinkButton Icon Only
iconOnly
stylebackgroundbgColor__normal#FF1654
stylelabellabel__fontColor__normal#FFFFFF
stylelabellabel__fontWeight__normalbold
stylelabellabel__fontAligncenter
stylelabellabel__textTransform__normaluppercase
styleiconicon__colorPrimary__normal#FFFFFF
styleiconiconPositioniconRight
styleiconiconRightfas-fa-arrow-right

Redirecting​

The button component enables you to redirect to pages or external URLs each time it is clicked.

For instance, you could redirect to an official website to give further information about a topic your application covers.

How to:

  1. Navigate to Component inside the Detail Panel and unfold the group Misc.
  2. Choose a Link-Target of your liking by inserting the relative route of your page or an external url - for example www.google.com or landing for a yPage with this route.

Calling a Custom Javascript Function​

The yLinkButton component enables you to execute a custom JavaScript function each time it is clicked, similar to the yButton.

For instance, you could set up a function that alerts "Attention, redirecting!", before redirecting.

How to:

  1. Follow the steps in Redirecting Example.
  2. Open the editor under Event, unfold Input and open EvtClicked.
  3. Associate a custom JavaScript function to the yLinkButton. This function will be invoked every time the button is clicked.
  4. Include the provided JavaScript snippet below to implement an alert function on the button.

Code example:

You can add the following JavaScript code snippet to your application to implement an alert function on the yLinkButton component.

With this function, each click alerts a message before redirecting.

info

This will only work, when redirecting inside your application and not directing to external urls.

EvtClicked
// function onLink-button_7_EvtClicked (apiObject, component, eventData) {

alert("Attention, redirecting!");

// }

Interacting with Clipboard​

You can use the yLinkButton to control Clipboards. The yeetClipboard functionality provides an effective method for managing table entries for example. For example, you can set up a mechanism to delete a table entry by a simple button click.

How to:

  1. Open the Detail Panel and proceed to the events tab and locate the Control section. Here, you will need to enable the Commit-Delete option. This step empowers the yLinkButton component with the capability to perform this functionality.
  2. Create a new Clipboard and enable the Use Entity toggle.
Button Clipboard useEntity
  1. You can then click on Entity-Properties and edit the Entity. This Clipboard should be linked to the entity containing the table entry you wish to delete. This way you have to fill in the data, like in the picture below.
Button Clipboard Entity
  1. Finally, go to the Events, edit it and select the yButton as SourceLink-1. Dont forget that the event has to be commit-delete, which should look something like: y-page:1:y-button:2:commit-delete.
Button Clipboard SourceLink

This will establish a button that, when clicked, will delete the specified entry from your table.

If you want to know more about this topic, visit the Clipboard.